<template>
  <div class="edit-table">
    <table @dblclick="onDblclick">
      <tbody>
        <tr
          v-for="(item, row) in tableData"
          :key="row"
        >
          <td
            v-for="(e, col) in item"
            :key="col"
            :class="{ selected: curTd === row + ',' + col }"
            @click="onClick(row, col)"
          >
            <el-input
              v-if="canEdit && curTd === row + ',' + col"
              v-model="tableData[row][col]"
              v-focus
              @blur="onBlur"
            />
            <span v-else>{{ e }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="addRow">
        添加新行
      </button>
      <button @click="addCol">
        添加新列
      </button>
      <button @click="deleteRow">
        删除行
      </button>
      <button @click="deleteCol">
        删除列
      </button>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 指令的定义
      inserted(el) {
        // 聚焦元素
        el.querySelector('input').focus();
      },
    },
  },
  data() {
    return {
      curProperty: '',
      curTd: '',
      canEdit: false,
      preCurTd: '', // 失焦时 curTd 值为空，这时删除会读不到值，因此用这个变量来代替，用于删除行列
    };
  },
  computed: {
    tableData() {
      return this.$store.state.curComponent.propValue.data;
    },
  },
  methods: {
    onDblclick() {
      this.canEdit = true;
    },

    onClick(row, col) {
      this.curTd = `${row},${col}`;
      this.preCurTd = this.curTd;
    },

    onBlur() {
      this.canEdit = false;
      this.curTd = '';
    },

    deleteRow() {
      if (!this.preCurTd) {
        this.$message.error('请先选择要删除的行');
        return;
      }

      const row = this.preCurTd.split(',')[0];
      this.tableData.splice(row, 1);
    },

    addRow() {
      this.tableData.push(new Array(this.tableData[0]?.length || 1).fill(' '));
    },

    addCol() {
      if (this.tableData.length) {
        this.tableData.forEach((item) => item.push(' '));
      } else {
        this.tableData.push([' ']);
      }
    },

    deleteCol() {
      if (!this.preCurTd) {
        this.$message.error('请先选择要删除的列');
        return;
      }

      const col = this.preCurTd.split(',')[1];
      this.tableData.forEach((item) => {
        item.splice(col, 1);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-table {
    overflow: auto;
    margin-bottom: 8px;

    & > div {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        button {
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            text-align: center;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            font-weight: 500;
            padding: 4px 10px;
            font-size: 14px;
            border-radius: 4px;
            margin-bottom: 10px;

            &:hover {
                background: #ecf5ff;
                color: #409eff;
            }
        }
    }

    table {
        border-collapse: collapse;
        word-break: break-all;
        word-wrap: break-word;
        text-align: center;
        font-size: 12px;

        td {
            border: 1px solid #ebeef5;
            height: 40px;
            min-width: 60px;
            max-width: 80px;
            padding: 10px;
        }
    }

    .selected {
        background: #ecf5ff;
        color: #409eff;
    }
}

</style>
